<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Galeria</title>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/bootstrap-image-gallery.min.css">
<style>
.zdjecia {
background: #e6d37a;
padding: 10px;
max-width: 680px;
position: fixed;
left: calc(50% - 340px);
}
body {
background: #c6b154;
}

</style>
</head>
<body>
<a href = "index.jsp"> Powrot na strone glowna</a><br><br>


<div id="blueimp-gallery" class="blueimp-gallery">
    <!-- The container for the modal slides -->
    <div class="slides"></div>
    <!-- Controls for the borderless lightbox -->
    <h3 class="title"></h3>
    <a class="prev"><</a>
    <a class="next">></a>
    <a class="close">x</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
    <!-- The modal dialog, which will be used to wrap the lightbox content -->
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body next"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left prev">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                        Previous
                    </button>
                    <button type="button" class="btn btn-primary next">
                        Next
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>




<div id="links" class='zdjecia'>
<center>
<h2><i>Galeria</i></h2><br><br>
    <a href="Images/img/g1.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/g1.jpg" alt="eSchronisko">
    </a>
    <a href="Images/img/g2.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/g2.jpg" alt="eSchronisko">
    </a>
    <a href="Images/img/g3.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/g3.jpg" alt="eSchronisko">
    </a>
    <a href="Images/img/g4.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/g4.jpg" alt="eSchronisko">
    </a>
    <a href="Images/img/g5.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/g5.jpg" alt="eSchronisko">
    </a>
    <a href="Images/img/g6.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/g6.jpg" alt="eSchronisko">
    </a>
    <br>
    <a href="Images/img/g7.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/g7.jpg" alt="eSchronisko">
    </a>
    <a href="Images/img/g8.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/g8.jpg" alt="eSchronisko">
    </a>
    <a href="Images/img/g9.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/g9.jpg" alt="eSchronisko">
    </a>
    <a href="Images/img/g10.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/g10.jpg" alt="eSchronisko">
    </a>
    <a href="Images/img/g11.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/g11.jpg" alt="eSchronisko">
        <a href="Images/picture/kot1.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/kot1.jpg" alt="eSchronisko">
    </a>
    <a href="Images/picture/pies1.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/pies1.jpg" alt="eSchronisko">
    </a>
    <a href="Images/picture/kot2.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/kot2.jpg" alt="eSchronisko">
    </a>
    <a href="Images/picture/kot3.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/kot3.jpg" alt="eSchronisko">
    </a>
    <a href="Images/picture/pies3.jpg" title="eSchronisko" data-gallery>
        <img src="Images/img/small/pies3.jpg" alt="eSchronisko">
    </a>
    </a>
</center>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/bootstrap-image-gallery.min.js"></script>

</body>


</html>

